<template>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    mounted() {
      this.renderChart();
    },
    methods: {
      renderChart() {
        const chartDom = this.$refs.chart;
        const myChart = echarts.init(chartDom);
  
        const option = {
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '环形图',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false // 悬停时不显示标签
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  value: 3.49,
                  name: '3.49',
                  itemStyle: {
                    color: {
                      type: 'linear',
                      x: 1,
                      y: 1,
                      x2: 1, // 从左到右渐变
                      y2: 0,
                      colorStops: [
                        { offset: 0, color: '#f7be1d' }, // 渐变色起始颜色
                        { offset: 1, color: '#f7be1d00' }  // 渐变色结束颜色
                      ]
                    }
                  }
                },
                {
                  value: 2,
                  name: '2',
                  itemStyle: {
                    color: {
                      type: 'linear',
                      x: 1,
                      y: 1,
                      x2: 0, // 从左到右渐变
                      y2: 0,
                      colorStops: [
                        { offset: 0, color: '#3ea0ff' }, // 渐变色起始颜色
                        { offset: 1, color: '#3ea0ff00' }  // 渐变色结束颜色
                      ]
                    }
                  }
                },
                {
                  value: 0.25,
                  name: '0.25',
                  itemStyle: {
                    color: {
                      type: 'linear',
                      x: 1,
                      y: 0,
                      x2: 0, // 从左到右渐变
                      y2: 0,
                      colorStops: [
                        { offset: 0, color: '#84FAB0' }, // 渐变色起始颜色
                        { offset: 1, color: '#3dfbaf03' },  // 渐变色结束颜色
                        
                      ]
                    }
                  }
                }
              ]
            }
          ],
          graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '总数\n3.74', // 环形图中间的文字和数据
              textAlign: 'center',
              fill: '#333', // 文字颜色
              fontSize: 20,
              fontWeight: 'bold'
            }
          }
        };
  
        myChart.setOption(option);
      }
    }
  };
  </script>